<template>
  <div class="shopcart">
    <section class="cart-left">
      <div class="cart-left-icon" :class="{ active_bgc: totalNum }">
        <icon-svg icon-class="icongouwuche"></icon-svg>
        <span class="cart-left-num" v-if="totalNum">{{ totalNum }}</span>
      </div>
    </section>
    <section class="cart-mid">
      <span class="total_price">￥{{ totalPrice || 0 }}</span>
      <span class="delivery_fee">配送费￥{{ deliveryFee }}</span>
    </section>
    <section class="cart-right">
      <div v-if="totalPrice >= minimumOrderAmount" class="enough">去结算</div>
      <div class="not-enough" v-else>
        还差￥{{ minimumOrderAmount - totalPrice }}起送
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "shopcart",
  data() {
    return {};
  },
  props: ["totalPrice", "deliveryFee", "minimumOrderAmount", "totalNum"],
  components: {},
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.shopcart {
  display: flex;

  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 2rem;

  background-color: #333;

  line-height: 2rem;

  .cart-left {
    float: left;

    width: 20%;

    div.active_bgc {
      background-color: #3190e8;
    }

    .cart-left-icon {
      position: absolute;
      top: -1rem;
      left: .5rem;

      width: 2.5rem;
      height: 2.5rem;

      border: .2rem solid #444;
      border-radius: 50%;
      background-color: #333;

      line-height: 2.5rem;

      text-align: center;

      .icongouwuche {
        color: #fff;

        font-size: 1.5rem;
      }

      .cart-left-num {
        position: absolute;

        width: .7rem;
        min-width: .7rem;
        height: .7rem;

        color: #fff;
        border-radius: 50%;
        background-color: #ff461d;

        font-size: .5rem;
        line-height: .7rem;
      }
    }
  }

  .cart-mid {
    display: flex;
    align-content: flex-start;
    flex-direction: column;

    width: 50%;

    .total_price {
      height: 1.2rem;

      color: #fff;

      font-size: .8rem;
      font-weight: 700;
      line-height: 1.2rem;
    }

    .delivery_fee {
      height: .8rem;
      padding-left: .15rem;

      color: #fff;

      font-size: .5rem;
      line-height: .8rem;
    }
  }

  .cart-right {
    width: 30%;

    .enough {
      color: #fff;
      background-color: #4cd964;

      font-size: .7rem;
      font-weight: 700;

      text-align: center;
    }

    .not-enough {
      color: #fff;
      background-color: #535356;

      font-size: .6rem;
      font-weight: 700;

      text-align: center;
    }
  }
}

</style>
